<template>
  <div class="home">
    <el-select v-model="frequencyEditForm.weekCheckList" multiple>
      <el-option
        v-for="(item, index) in weekList"
        :key="index"
        :value="item.value"
        :label="item.label"
      >
        <span class="check"></span>
        <span style="margin-left: 8px">{{ item.label }}</span>
      </el-option>
      
    </el-select>
    
  </div>
</template>


<script>
// @ is an alias to /src

export default {
  data() {
    return {
      frequencyEditForm: {
        weekCheckList: [],
      },

      weekList: [
        {
          value: "星期一",

          label: "周一",

          isCheck: false,
        },

        {
          value: "星期二",

          label: "周二",

          isCheck: false,
        },

        {
          value: "星期三",

          label: "周三",

          isCheck: false,
        },

        {
          value: "星期四",

          label: "周四",

          isCheck: false,
        },

        {
          value: "星期五",

          label: "周五",

          isCheck: false,
        },

        {
          value: "星期六",

          label: "周六",

          isCheck: false,
        },

        {
          value: "星期日",

          label: "周日",

          isCheck: false,
        },
      ],
    };
  },
  methods: {
    handleWeekChange(val) {
      this.weekList.forEach((v) => {
        v.isCheck = false;
      });

      val.forEach((el) => {
        this.weekList.forEach((v) => {
          if (el === v.value) {
            v.isCheck = true;
          }
        });
      });
    },
        selectAll () {
      this.menus = []
      if (this.checkedAll) {
        this.menuList.map(item => {
          this.menus.push(item.id)
        })
      } else {
        this.menus = []
      }
    },

    // checkbox change事件

    handleCheckBoxWeekChange(val, item) {
      if (val) {
        this.frequencyEditForm.weekCheckList.push(item.value);
      } else {
        let index = this.frequencyEditForm.weekCheckList.findIndex(
          (ele) => ele.value === item.value
        );

        this.frequencyEditForm.weekCheckList.splice(index);
      }
    },
  },
};
</script>
<style scoped> 
 /* .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  content: "";
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
  background-color: #409eff;
  border-color: #409eff;
}

.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected
  .check:after {
  transform: rotate(45deg) scaleY(1);
}

.el-select-dropdown.is-multiple .el-select-dropdown__item .check::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item .check {
  display: inline-block;
  position: relative;
  top: 2px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}*/
</style>  